<template>
  <mt-popup style="width:100%;height:100%"
            v-model="selectFeelVisible"
            :modal="false"
            position="right">
    <div class="page selectFeel l-form-list">
      <awesome-picker v-if="defaultPicker.data && !pickerHide"
                      ref="defaultPicker"
                      :textTitle="defaultPicker.textTitle"
                      :data="defaultPicker.data"
                      :anchor="defaultPicker.anchor"
                      @confirm="(v)=>handleConfirm(defaultPicker,v,defaultPicker.data)"></awesome-picker>
      <div class="scroll-view">
        <customHeader middleTitle="选择支付方式"
                      @leftCallBack="back" />
        <div class="page-body">
          <div class="form-blank-style">
            <div class="ct">
              <div class="input-item-box"
                   v-for="(value,key) in initFeeData"
                   :key="key"
                   v-show="!value.disabled">
                <div class="input-item">
                  <div class="itemBox">
                    <div class="item">
                      <!-- <i :class="value.icon+' icon'"></i> -->
                      <img :src="value.imgs" alt="">
                      <div class="label">{{value.payTypeName}}</div>
                      <div class="pick-value select" v-if="!value.hasOpen">
                        <!-- <mt-switch class="switch" style="justify-content:flex-end"
                                   @change="switchChange"
                                   v-model="value.selected"></mt-switch> -->
                                   <van-switch v-model="value.selected"   @change="switchChange" active-color="#4CD964FF" inactive-color="#EEEEEEFF"  />
                      </div>
                      <div class="pick-value select" v-else>
                        已开通
                      </div>
                    </div>
                  </div>
                </div>
                <div class="input-item"
                     v-if="value.selected&&value.canEncourageStatus&&!value.hasOpen">
                  <div class="itemBox">
                    <div class="item">
                      <div class="label required">商户运营鼓励金</div>
                      <div class="pick-value select">
                        <!-- <mt-switch class="switch" style="justify-content:flex-end" @change="switchChange"
                                   v-model="value.useEncourageStatus"></mt-switch> -->
                                   <van-switch v-model="value.useEncourageStatus"   @change="switchChange" active-color="#4CD964FF" inactive-color="#EEEEEEFF"  />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="input-item"
                     v-if="value.selected&&value.hasUnitPrice&&!value.hasOpen">
                  <div class="itemBox">
                    <div class="item">
                      <div class="label required">阶梯费率</div>
                      <div class="pick-value select">
                        <!-- <mt-switch class="switch" style="justify-content:flex-end"
                                   @change="(val)=>useUnitPriceSwitchChange(val,value)"
                                   v-model="value.useUnitPrice"></mt-switch> -->

                    <van-switch v-model="value.useUnitPrice"    @change="(val)=>useUnitPriceSwitchChange(val,value)" active-color="#4CD964FF" inactive-color="#EEEEEEFF"  />
 
                      </div>
                    </div>
                  </div>
                </div>
                <div class="input-item" v-if="value.selected&&!value.useUnitPrice&&value.feeModels.length==1&&!value.hasOpen">
                  <div class="itemBox">
                    <div class="item"
                         v-for="(item,index) in value.feeModels"
                         :key="key+index">
                      <div class="label required">申请费率</div>
                      <div :class="`pick-value select ${checkPickerValueShow(item.feeValuePicker,item.feeValue)!==item.feeValuePicker.tip?'':'no-select'}`"
                           @click="showPicker(item.feeValuePicker,item.feeValue)">{{checkPickerValueShow(item.feeValuePicker,item.feeValue)}}</div>
                      <i class="sl-right_arrow"></i>
                    </div>
                  </div>
                </div>
                <div class="input-item" v-if="value.selected&&!value.useUnitPrice&&value.payType=='03'&&!value.hasOpen">
                  <div class="itemBox">
                    <div class="item"
                         v-for="(item,index) in value.feeModels"
                         :key="key+index"
                         v-show="index==0">
                      <div class="label required">申请费率</div>
                      <div :class="`pick-value select ${checkPickerValueShow(item.feeValuePicker,item.feeValue)!==item.feeValuePicker.tip?'':'no-select'}`"
                           @click="showPicker(item.feeValuePicker,item.feeValue)">{{checkPickerValueShow(item.feeValuePicker,item.feeValue)}}</div>
                      <i class="sl-right_arrow"></i>
                    </div>
                  </div>
                </div>
                <div class="fee-box"
                     v-if="value.selected&&!value.useUnitPrice &&value.feeModels.length >1&&value.payType!=='03'&&!value.hasOpen">
                  <span class="required">申请费率</span>
                  <div class="form-style-right-box">
                    <div v-for="(item,index) in value.feeModels"
                         :key="key+index">
                      <div class="form-style-right2">
                        <span v-if="item.bankCardType=='1'"
                              class="above">信用卡</span>
                        <span v-if="item.bankCardType=='2'"
                              class="above">储蓄卡</span>
                        <span :class="`pick-value select ${checkPickerValueShow(item.feeValuePicker,item.feeValue)!==item.feeValuePicker.tip?'':'no-select'}`"
                              @click="showPicker(item.feeValuePicker,item.feeValue)">{{checkPickerValueShow(item.feeValuePicker,item.feeValue)}}
                          <i class="sl-right_arrow"></i>
                        </span>
                      </div>
                      <div class="form-style-right2"
                           v-if="item.hasMaxCharge">
                        <span v-if="item.bankCardType=='1'"
                              class="above">信用卡手续费最高</span>
                        <span v-if="item.bankCardType=='2' "
                              class="above">储蓄卡手续费最高</span>
                        <span :class="`pick-value select ${checkPickerValueShow(item.maxChargePicker,item.maxCharge)!==item.maxChargePicker.tip?'':'no-select'}`"
                              @click="showPicker(item.maxChargePicker,item.maxCharge)">{{checkPickerValueShow(item.maxChargePicker,item.maxCharge)}}

                          <i class="sl-right_arrow"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="input-item"
                     v-if="value.selected&&value.useUnitPrice&&!value.hasOpen">
                  <div class="itemBox">
                    <div class="item">
                      <div class="label required">笔单价</div>
                      <div :class="`pick-value select ${checkPickerValueShow(value.unitPricePicker,value.unitPrice)!==value.unitPricePicker.tip?'':'no-select'}`"
                           @click="showPicker(value.unitPricePicker,value.unitPrice)">{{checkPickerValueShow(value.unitPricePicker,value.unitPrice)}}</div>
                      <i class="sl-right_arrow"></i>
                    </div>
                  </div>
                </div>
                <div class="fee-box"
                     v-if="value.selected&&value.useUnitPrice &&value.feeModels.length >1&&!value.hasOpen">
                  <span class="required">申请费率</span>
                  <div class="form-style-right-box">
                    <div class="form-style-right2">
                      <span class="input-thin">{{checkPickerValueShow(value.unitPricePicker,value.unitPrice)==value.unitPricePicker.tip?'笔单价':checkPickerValueShow(value.unitPricePicker,value.unitPrice)}}</span>
                      <span class="above">以下</span>
                      <span :class="`pick-value select ${checkPickerValueShow(value.feeModels[0].feeDownValuePicker,value.feeModels[0].feeDownValue)!==value.feeModels[0].feeDownValuePicker.tip?'':'no-select'} `"
                            @click="showPicker(value.feeModels[0].feeDownValuePicker,value.feeModels[0].feeDownValue)">{{checkPickerValueShow(value.feeModels[0].feeDownValuePicker,value.feeModels[0].feeDownValue)}}</span>

                      <i class="sl-right_arrow"></i>
                    </div>
                    <div v-for="(item,index) in value.feeModels"
                         :key="key+index">
                      <div class="form-style-right2">
                        <span v-if="item.bankCardType=='1'"
                              class="above">信用卡</span>
                        <span v-if="item.bankCardType=='2'"
                              class="above">储蓄卡</span>
                        <span class="input-thin">{{checkPickerValueShow(value.unitPricePicker,value.unitPrice)==value.unitPricePicker.tip?'笔单价':checkPickerValueShow(value.unitPricePicker,value.unitPrice)}}</span>
                        <span class="above">以上</span>

                        <span :class="`pick-value select ${checkPickerValueShow(item.feeUpValuePicker,item.feeUpValue)!==item.feeUpValuePicker.tip?'':'no-select'}`"
                              @click="showPicker(item.feeUpValuePicker,item.feeUpValue)">{{checkPickerValueShow(item.feeUpValuePicker,item.feeUpValue)}}
                        </span>
                        <i class="sl-right_arrow"></i>
                      </div>
                      <div class="form-style-right2"
                           v-if="item.hasMaxCharge">
                        <span v-if="item.bankCardType=='1'"
                              class="above">信用卡手续费最高</span>
                        <span v-if="item.bankCardType=='2'"
                              class="above">储蓄卡手续费最高</span>
                        <span :class="`pick-value select ${checkPickerValueShow(item.maxChargePicker,item.maxCharge)!==item.maxChargePicker.tip?'':'no-select'}`"
                              @click="showPicker(item.maxChargePicker,item.maxCharge)">{{checkPickerValueShow(item.maxChargePicker,item.maxCharge)}}

                        </span>
                        <i class="sl-right_arrow"></i>
                      </div>
                    </div>

                  </div>
                </div>
                <div class="input-item"
                     v-if="value.selected&&value.canEncourageStatus && value.useEncourageStatus&&!value.hasOpen">
                  <div class="itemBox">
                    <div class="item">
                      <div class="label required">补贴后费率</div>
                      <inputClear class="input"
                                  type="number"
                                  pattern="number"
                                  @onkeyup="value.subsidyFee=value.subsidyFee.replace(/[^\d\.]/g,'')"
                                  @blur="fieldValidate('subsidyFee',value)"
                                  v-model="value.subsidyFee"
                                  placeholder="请填写"></inputClear>
                      <span class="unit">%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="input-item-box no-layout">
                <!-- <div class="input-item">
                  <div class="itemBox">
                    <div class="item">
                      <div class="label required">通道</div>
                      <div :class="`pick-value select ${checkPickerValueShow(channelTypePicker,channelTypeName)!==channelTypePicker.tip?'':'no-select'}`"
                           @click="getActivityType">{{checkPickerValueShow(channelTypePicker,channelTypeName)}}</div>
                      <i class="sl-right_arrow"></i>
                    </div>
                  </div>
                </div> -->
                <div class="input-item">
                  <div class="itemBox">
                    <div class="item"
                         style="flex-wrap:wrap">
                      <div class="label">备注</div>
                      <div style="width:100%">
                        <textarea class="textarea"
                                  v-model="remark"
                                  placeholder="输入您要备注的内容，最多100个字"
                                  rows="2" />
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sumbmit">
            <mt-button class="btn"
                       type="primary"
                       @click="submit">确认</mt-button>
          </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import tools from "../../tools/tools";
import inputClear from "../../components/inputClear/inputClear";
import { Switch, Toast, MessageBox, DatetimePicker } from "mint-ui";
Vue.component(DatetimePicker.name, DatetimePicker);
import AwesomePicker from "vue-awesome-picker";
import moment from "moment";
Vue.use(AwesomePicker);

export default {
  name: "selectFeel",
  data() {
    return {
      defaultPicker: {
        tip: "",
        type: "",
        anchor: [],
        textTitle: "",
        data: []
      },
      pickerHide:false,
      channelType: "",
      channelTypeName: "",
      openChannelType: "",
      openChannelTypeName: "",
      channelTypePicker: {
        tip: "请选择",
        type: "channelType",
        anchor: [0],
        textTitle: "通道",
        selectedData: [],
        selectedValue: ""
      },
      initFeeData: {
        "01": {
          selected: true,
          disabled: false,
          icon: "sl-zfbzf zfb-icon",
          canEncourageStatus: true,
          useEncourageStatus: false,
          payType: "01",
          payTypeName: "支付宝",
          imgs:require("../../assets/images/Group 925.png"),
          unitPrice: null,
          hasUnitPrice: false,
          useUnitPrice: false,
          subsidyFee: "",
          hasOpen:false,
          unitPricePicker: {
            tip: "请选择",
            type: "unitPrice",
            anchor: [0],
            textTitle: "笔单价",
            selectedData: [],
            selectedValue: ""
          },
          feeModels: [
            {
              bankCardType: null,
              bankCardTypeName: null,
              feeUpValue: null,
              maxCharge: null,
              hasMaxCharge: false,
              feeValue: null,
              feeValuePicker: {
                tip: "请选择",
                type: "feeValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeUpValuePicker: {
                tip: "请选择",
                type: "feeUpValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeDownValuePicker: {
                tip: "请选择",
                type: "feeDownValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              maxChargePicker: {
                tip: "请选择",
                type: "maxCharge",
                anchor: [0],
                textTitle: "最高手续费",
                selectedData: [],
                selectedValue: ""
              }
            }
          ]
        },
        "02": {
          selected: true,
          disabled: false,
          icon: "sl-wxzf wx-icon",
          canEncourageStatus: true,
          encourageStatus: false,
          useEncourageStatus: false,
          payType: "02",
          payTypeName: "微信",
          imgs:require("../../assets/images/Group 926.png"),
          unitPrice: null,
          hasUnitPrice: false,
          useUnitPrice: false,
          subsidyFee: "",
          hasOpen:false,
          unitPricePicker: {
            tip: "请选择",
            type: "unitPrice",
            anchor: [0],
            textTitle: "笔单价",
            selectedData: [],
            selectedValue: ""
          },
          feeModels: [
            {
              bankCardType: null,
              bankCardTypeName: null,
              feeUpValue: null,
              maxCharge: null,
              hasMaxCharge: false,
              feeValue: null,
              feeValuePicker: {
                tip: "请选择",
                type: "feeValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeUpValuePicker: {
                tip: "请选择",
                type: "feeUpValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeDownValuePicker: {
                tip: "请选择",
                type: "feeDownValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              maxChargePicker: {
                tip: "请选择",
                type: "maxCharge",
                anchor: [0],
                textTitle: "最高手续费",
                selectedData: [],
                selectedValue: ""
              }
            }
          ]
        },
        "03": {
          selected: true,
          disabled: false,
          icon: "sl-ysf ysf-icon",
          canEncourageStatus: false,
          encourageStatus: false,
          payType: "03",
          payTypeName: "云闪付",
          imgs:require("../../assets/images/Group 927.png"),
          unitPrice: null,
          hasUnitPrice: true,
          useUnitPrice: false,
          subsidyFee: "",
          hasOpen:false,
          unitPricePicker: {
            tip: "请选择",
            type: "unitPrice",
            anchor: [0],
            textTitle: "笔单价",
            selectedData: [],
            selectedValue: ""
          },
          feeModels: [
            {
              bankCardType: 1,
              bankCardTypeName: "信用卡",
         
              feeUpValue: null,
              maxCharge: null,
              hasMaxCharge: false,
              feeValue: null,
              feeValuePicker: {
                tip: "请选择",
                type: "feeValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeUpValuePicker: {
                tip: "请选择",
                type: "feeUpValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeDownValuePicker: {
                tip: "请选择",
                type: "feeDownValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              maxChargePicker: {
                tip: "请选择",
                type: "maxCharge",
                anchor: [0],
                textTitle: "最高手续费",
                selectedData: [],
                selectedValue: ""
              }
            },
            {
              bankCardType: 2,
              bankCardTypeName: "储蓄卡",
              feeUpValue: null,
              maxCharge: null,
              hasMaxCharge: true,
              feeValue: null,
              feeValuePicker: {
                tip: "请选择",
                type: "feeValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeUpValuePicker: {
                tip: "请选择",
                type: "feeUpValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeDownValuePicker: {
                tip: "请选择",
                type: "feeDownValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              maxChargePicker: {
                tip: "请选择",
                type: "maxCharge",
                anchor: [0],
                textTitle: "最高手续费",
                selectedData: [],
                selectedValue: ""
              }
            }
          ]
        },
        "04": {
          selected: false,
          disabled: false,
          icon: "sl-ylzf yl-icon",
          canEncourageStatus: false,
          encourageStatus: false,
          payType: "04",
          payTypeName: "POS刷卡",
          imgs:require("../../assets/images/Group 928.png"),
          unitPrice: null,
          hasUnitPrice: true,
          useUnitPrice: false,
          subsidyFee: "",
          hasOpen:false,
          unitPricePicker: {
            tip: "请选择",
            type: "unitPrice",
            anchor: [0],
            textTitle: "笔单价",
            selectedData: [],
            selectedValue: ""
          },
          feeModels: [
            {
              bankCardType: 1,
              bankCardTypeName: "信用卡",
              feeUpValue: null,
              maxCharge: null,
              feeValue: null,
              hasMaxCharge: false,
              feeValuePicker: {
                tip: "请选择",
                type: "feeValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeUpValuePicker: {
                tip: "请选择",
                type: "feeUpValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeDownValuePicker: {
                tip: "请选择",
                type: "feeDownValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              maxChargePicker: {
                tip: "请选择",
                type: "maxCharge",
                anchor: [0],
                textTitle: "最高手续费",
                selectedData: [],
                selectedValue: ""
              }
            },
            {
              bankCardType: 2,
              bankCardTypeName: "储蓄卡",
              feeUpValue: null,
              maxCharge: null,
              hasMaxCharge: true,
              feeValue: null,
              feeValuePicker: {
                tip: "请选择",
                type: "feeValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeUpValuePicker: {
                tip: "请选择",
                type: "feeUpValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              feeDownValuePicker: {
                tip: "请选择",
                type: "feeDownValue",
                anchor: [0],
                textTitle: "费率",
                selectedData: [],
                selectedValue: ""
              },
              maxChargePicker: {
                tip: "请选择",
                type: "maxCharge",
                anchor: [0],
                textTitle: "最高手续费",
                selectedData: [],
                selectedValue: ""
              }
            }
          ]
        }
      },
      remark: ""
    };
  },
  props: {
    selectFeelVisible: Boolean,
    feelData: Object,
    feeModels: Array,
    usablefeeList: Array,
    shopInfo: Object,
    hasOpen:Object
  },
  watch: {},
  mounted() {
    this.checkFeeSelected(true);
    this.checkZL();
  },
  methods: {
    checkZL(){
      for(let key in this.initFeeData){
        this.initFeeData[key].hasOpen = this.hasOpen[key];
        if(this.$route.query.payTypes && !this.$route.query.payTypes.includes(this.initFeeData[key].payType)) {
          this.$delete(this.initFeeData, key)
        }
      }
    },
    resetChannelType() {
      this.channelTypePicker.selectedValue = "";
      this.channelTypePicker.selectedData = [];
      this.channelType = "";
      this.channelTypeName = "";
      this.openChannelType = "";
      this.openChannelTypeName = "";
    },
    switchChange() {
      this.resetChannelType();
    },
    useUnitPriceSwitchChange(val,value) {

      value.unitPricePicker.selectedValue = "";
      value.unitPricePicker.anchor = [];
      value.unitPrice = '';
      value.feeModels.map((item)=>{
        item.defaultValue = {};
        item.feeValuePicker.selectedValue = "";
        item.feeValuePicker.anchor = [];
        item.feeUpValuePicker.selectedValue = "";
        item.feeUpValuePicker.anchor = [];
        item.feeDownValuePicker.selectedValue = "";
        item.feeDownValuePicker.anchor = [];
        item.maxChargePicker.selectedValue = "";
        item.maxChargePicker.anchor = [];
        item.feeUpValue = "";
        item.maxCharge = "";
        item.feeValue = "";
        item.feeDownValue = "";
      })
      this.pickerHide = true;
      this.resetFeeSelected(value.feeInfoObj, value);
    },

    checkFeeSelected(init) {
      this.channelType = this.shopInfo.channelType ;
      this.channelTypeName = this.shopInfo.channelTypeName ;
      this.openChannelType = this.shopInfo.openChannelType ;

      if(this.shopInfo.feeModels&&this.shopInfo.feeModels.length>0){
        if(this.shopInfo.feeModels[0].merchantType!==3&&this.shopInfo.feeModels[0].merchantType!==4&&this.shopInfo.feeModels[0].merchantType!==11){
          this.channelType = this.shopInfo.feeModels[0].merchantType || '';
          this.channelTypeName = this.shopInfo.feeModels[0].merchantTypeName || '';
          this.openChannelType = this.shopInfo.feeModels[0].activityType || '';
        }
      }
      if (init) {

        for (let w = 0; w < this.feeModels.length; w++) {

          let temp = this.feeModels[w].payType;
          if (this.initFeeData[temp].feeModels.length == 1) {
            this.initFeeData[temp].feeModels[0].defaultValue = this.feeModels[
              w
            ];
          } else {
            for (let e = 0; e < this.initFeeData[temp].feeModels.length; e++) {
              if (
                this.feeModels[w].bankCardType ==
                this.initFeeData[temp].feeModels[e].bankCardType
              ) {
                this.initFeeData[temp].feeModels[
                  e
                ].defaultValue = this.feeModels[w];
                //如果有比单价 阶梯费率
                if(this.feeModels[w].unitPrice){
                  this.initFeeData[temp].feeModels[e].defaultValue.useUnitPrice = true;
                }
              }

            }
          }
          this.setDefaultData(this.initFeeData[temp]);
        }
      }
      for (let key in this.initFeeData) {
        let item = this.initFeeData[key];
        let feeInfoObj;
        for (let p = 0; p < this.usablefeeList.length; p++) {
          if (this.usablefeeList[p].payType == key) {
            feeInfoObj = this.usablefeeList[p];
          }
        }
        item.feeInfoObj = feeInfoObj;
        if (feeInfoObj) {
          item.disabled = false;
        } else {
          item.disabled = true;
        }
        if (init) {
          if (this.feelData[key]) {
            this.initFeeData[key].selected = true;
          }else{
            if(this.shopInfo.isManualSelection){
              this.initFeeData[key].selected = false;
            }
          }
        }
        //pageActivityType活动类型 0-无活动 1-商户运营鼓励金 2-阶梯费率  ladderFlag是否是阶梯费率 0-不是 1-是
        //pageActivityStatus 页面显示的活动开关（0无活动，1开，2关）
        this.resetFeeSelected(feeInfoObj, item);
      }

    },
    resetFeeSelected(feeInfoObj, item) {

      if (feeInfoObj && feeInfoObj.pageActivityType == 0) {
        item.canEncourageStatus = false;
        item.hasUnitPrice = false;
        for (let m = 0; m < feeInfoObj.feeInfo.length; m++) {
          for (let r = 0; r < item.feeModels.length; r++) {
            if (item.feeModels[r].bankCardType == 1) {
              //信用卡
              item.feeModels[r].feeValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeValue || [];
              item.feeModels[r].feeUpValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeUpValue || [];
              item.feeModels[r].feeDownValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeDownValue || [];
            } else if (item.feeModels[r].bankCardType == 2) {
              //储蓄卡
              item.feeModels[r].feeValuePicker.selectedData =
                feeInfoObj.feeInfo[m].depositCardRatioList || [];
              item.feeModels[r].feeUpValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeUpValue || [];
              item.feeModels[r].feeDownValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeDownValue || [];
              item.feeModels[r].maxChargePicker.selectedData =
                feeInfoObj.feeInfo[m].depositCardServiceChargeList || [];
            } else {
              item.feeModels[r].feeValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeValue;
              item.feeModels[r].feeUpValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeUpValue;
              item.feeModels[r].feeDownValuePicker.selectedData =
                feeInfoObj.feeInfo[m].feeDownValue;
            }
          }
        }
      }
      if (feeInfoObj && feeInfoObj.pageActivityType == 1) {
        item.canEncourageStatus = true;
        for (let i = 0; i < feeInfoObj.feeInfo.length; i++) {
          if (
            feeInfoObj.feeInfo[i].pageActivityStatus == 1 &&
            item.useEncourageStatus
          ) {
            for (let l = 0; l < item.feeModels.length; l++) {
              item.feeModels[l].feeValuePicker.selectedData =
                feeInfoObj.feeInfo[i].feeValue;
              item.feeModels[l].feeUpValuePicker.selectedData =
                feeInfoObj.feeInfo[i].feeUpValue;
              item.feeModels[l].feeDownValuePicker.selectedData =
                feeInfoObj.feeInfo[i].feeDownValue;
            }
          }
          if (
            feeInfoObj.feeInfo[i].pageActivityStatus == 2 &&
            !item.useEncourageStatus
          ) {
            for (let j = 0; j < item.feeModels.length; j++) {
              item.feeModels[j].feeValuePicker.selectedData =
                feeInfoObj.feeInfo[i].feeValue;
              item.feeModels[j].feeUpValuePicker.selectedData =
                feeInfoObj.feeInfo[i].feeUpValue;
              item.feeModels[j].feeDownValuePicker.selectedData =
                feeInfoObj.feeInfo[i].feeDownValue;
            }
          }
        }
      }
      if (feeInfoObj && feeInfoObj.pageActivityType == 2) {

        item.hasUnitPrice = true;
        for (let t = 0; t < feeInfoObj.feeInfo.length; t++) {
          if (
            feeInfoObj.feeInfo[t].pageActivityStatus == 1 &&
            item.useUnitPrice
          ) {
            item.unitPricePicker.selectedData = [
              feeInfoObj.feeInfo[t].unitPrice
            ];
            for (let u = 0; u < item.feeModels.length; u++) {
              if (item.feeModels[u].bankCardType == 1) {
                //信用卡
                item.feeModels[u].feeValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeValue || [];
                item.feeModels[u].feeUpValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeUpValue || [];
                item.feeModels[u].feeDownValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeDownValue || [];
              } else if (item.feeModels[u].bankCardType == 2) {
                //储蓄卡
                item.feeModels[u].feeValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeValue || [];
                item.feeModels[u].feeUpValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].depositCardRatioList || [];
                item.feeModels[u].feeDownValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeDownValue || [];
                item.feeModels[u].maxChargePicker.selectedData =
                  feeInfoObj.feeInfo[t].depositCardServiceChargeList || [];
              } else {
                item.feeModels[u].feeValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeValue || [];
                item.feeModels[u].feeUpValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeUpValue || [];
                item.feeModels[u].feeDownValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeDownValue || [];
              }
            }
          }
          if (
            feeInfoObj.feeInfo[t].pageActivityStatus == 2 &&
            !item.useUnitPrice
          ) {
            item.unitPricePicker.selectedData = [
              feeInfoObj.feeInfo[t].unitPrice
            ];
            for (let r = 0; r < item.feeModels.length; r++) {
              if (item.feeModels[r].bankCardType == 1) {
                //信用卡
                item.feeModels[r].feeValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeValue || [];
                item.feeModels[r].feeUpValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeUpValue || [];
                item.feeModels[r].feeDownValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeDownValue || [];
              } else if (item.feeModels[r].bankCardType == 2) {
                //储蓄卡
                item.feeModels[r].feeValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].depositCardRatioList || [];
                item.feeModels[r].feeUpValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeUpValue || [];
                item.feeModels[r].feeDownValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeDownValue || [];
                item.feeModels[r].maxChargePicker.selectedData =
                  feeInfoObj.feeInfo[t].depositCardServiceChargeList || [];
              } else {
                item.feeModels[r].feeValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeValue;
                item.feeModels[r].feeUpValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeUpValue;
                item.feeModels[r].feeDownValuePicker.selectedData =
                  feeInfoObj.feeInfo[t].feeDownValue;
              }
            }
          }
        }
      }
      this.pickerHide = false;
    },
    setDefaultData(feeData) {
      //打开阶梯费率开关
      feeData.useUnitPrice = feeData.feeModels[0].defaultValue.useUnitPrice;
      feeData.useEncourageStatus =
        feeData.feeModels[0].defaultValue.encourageStatus == "1" ? true : false;
      feeData.unitPrice = feeData.feeModels[0].defaultValue.unitPrice;
      feeData.subsidyFee = feeData.feeModels[0].defaultValue.subsidyFee;
      for (let i = 0; i < feeData.feeModels.length; i++) {
        if (feeData.feeModels[i].defaultValue) {
          feeData.feeModels[i].maxCharge =
            feeData.feeModels[i].defaultValue.maxCharge || null;
          feeData.feeModels[i].feeValue =
            feeData.feeModels[i].defaultValue.feeValue || null;
          if (feeData.unitPrice) {
            feeData.feeModels[i].feeDownValue =
              feeData.feeModels[i].defaultValue.feeValue ||
              feeData.feeModels[i].defaultValue.feeDownValue ||
              null;
          } else {
            feeData.feeModels[i].feeDownValue =
              feeData.feeModels[i].defaultValue.feeDownValue || null;
          }
          feeData.feeModels[i].feeUpValue =
            feeData.feeModels[i].defaultValue.feeUpValue || null;
          if (
            feeData.feeModels[i].feeUpValue &&
            feeData.feeModels[i].feeUpValuePicker.selectedData
          ) {
            feeData.feeModels[i].feeUpValuePicker.anchor = [
              feeData.feeModels[i].feeUpValuePicker.selectedData.indexOf(
                feeData.feeModels[i].feeUpValue
              )
            ];
          }
          if (
            feeData.feeModels[i].maxCharge &&
            feeData.feeModels[i].maxChargePicker.selectedData
          ) {
            feeData.feeModels[i].maxChargePicker.anchor = [
              feeData.feeModels[i].maxChargePicker.selectedData.indexOf(
                feeData.feeModels[i].maxCharge
              )
            ];
          }
          if (
            feeData.feeModels[i].feeValue &&
            feeData.feeModels[i].feeValuePicker.selectedData
          ) {
            feeData.feeModels[i].feeValuePicker.anchor = [
              feeData.feeModels[i].feeValuePicker.selectedData.indexOf(
                feeData.feeModels[i].feeValue
              )
            ];
          }
          if (
            feeData.feeModels[i].feeDownValue &&
            feeData.feeModels[i].feeDownValuePicker.selectedData
          ) {
            feeData.feeModels[i].feeDownValuePicker.anchor = [
              feeData.feeModels[i].feeDownValuePicker.selectedData.indexOf(
                feeData.feeModels[i].feeDownValue
              )
            ];
          }
        }
      }
    },
    getSelectData() {
      let feeModels = [];
      for (let key in this.initFeeData) {
        let item = this.initFeeData[key];
        if (item.selected && !item.disabled&&!item.hasOpen) {
          if (item.feeModels.length == 2) {
            if (!item.useUnitPrice && item.payType == "03") {
              item.feeModels[1].feeValuePicker.selectedValue =
                item.feeModels[0].feeValuePicker.selectedValue;
              // item.feeModels[0].hasMaxCharge = false;
              // item.feeModels[1].hasMaxCharge = false;
            }
            item.feeModels[1].feeDownValuePicker.selectedValue =
              item.feeModels[0].feeDownValuePicker.selectedValue;
          }
          for (let i = 0; i < item.feeModels.length; i++) {

            let feeValue;
            if (item.feeModels[i].feeValuePicker.selectedValue) {
              feeValue = item.feeModels[i].feeValuePicker.selectedValue.value;
            } else if (item.feeModels[i].feeDownValuePicker.selectedValue) {
              feeValue =
                item.feeModels[i].feeDownValuePicker.selectedValue.value;
            } else {
              feeValue = item.feeModels[i].feeValue;
            }
            let temp = {
              bankCardType: item.feeModels[i].bankCardType,
              encourageStatus: this.initFeeData[key].useEncourageStatus
                ? "1"
                : "0",
              subsidyFee: this.initFeeData[key].subsidyFee,
              useUnitPrice: this.initFeeData[key].useUnitPrice,
              feeUpValue: item.feeModels[i].feeUpValuePicker.selectedValue
                ? item.feeModels[i].feeUpValuePicker.selectedValue.value
                : item.feeModels[i].feeUpValue,
              feeDownValue: item.feeModels[i].feeDownValuePicker.selectedValue
                ? item.feeModels[i].feeDownValuePicker.selectedValue.value
                : item.feeModels[i].feeDownValue,
              feeValue: feeValue,
              maxCharge: item.feeModels[i].maxChargePicker.selectedValue
                ? item.feeModels[i].maxChargePicker.selectedValue.value
                : item.feeModels[i].maxCharge,
              hasMaxCharge: item.feeModels[i].hasMaxCharge,
              payType: key,
              payTypeName: this.initFeeData[key].payTypeName,
              unitPrice: item.unitPricePicker.selectedValue
                ? item.unitPricePicker.selectedValue.value
                : item.unitPrice,
              merchantType: this.channelTypePicker.selectedValue
                ? this.channelTypePicker.selectedValue.data.channelType
                : this.channelType,
              merchantTypeName: this.channelTypePicker.selectedValue
                ? this.channelTypePicker.selectedValue.data.channelTypeName
                : this.channelTypeName,
              activityType: this.channelTypePicker.selectedValue
                ? this.channelTypePicker.selectedValue.data.openChannelType
                : this.openChannelType
            };
            feeModels.push(temp);
          }
        }
      }
      return feeModels;
    },

    repeatFeelData(data) {
      if (data) {
        if (data.toString().length > 4) {
          return (data * 100).toFixed(2);
        }
        return data;
      } else {
        return;
      }
    },
    //查询通道
    getActivityType() {
      let feeModels = this.getSelectData();
      if (!this.checkData(feeModels)) {
        return;
      }
      let param = {
        supplierId: this.shopInfo.supplierId,
        shopId: this.shopInfo.shopId,
        channelType: this.shopInfo.channelType,
        settleAccountsType: this.shopInfo.bankcardModel.settleAccountsType,
        accountType: this.shopInfo.bankcardModel.accountType,
        merchantType: this.shopInfo.detailModel.merchantType,
        feeModelList: feeModels,
        scenario: 1
      };
      //把参数拼接到请求地址里
      let url = "/merchant/fee/query/channel/list.do";
      this.ajax({
        type: "post",
        data: param,
        url: url,
        controlLoading: true
      })
        .then(response => {
          if (response && response.success) {
            const res = response.resultObject;
            if (res) {
              this.channelTypePicker.selectedData = response.resultObject;
              this.showPicker(this.channelTypePicker);
            } else {
              Toast("当前费率无可用通道,请重新选择费率");
            }
          } else {
            Toast(response.msg || "获取通道失败");
          }
        })
        .catch(err => {
        });
    },
    getchannelTypeData(data, key) {
      let channelTypeData = {};
      const checkName = (datas, keys) => {
        for (let i = 0; i < datas.length; i++) {
          if (datas[i].key == keys) {
            channelTypeData = datas[i];
            return;
          }
          if (datas[i].children) {
            checkName(datas[i].children, keys);
          }
        }
      };
      checkName(data, key);
      return channelTypeData;
    },
    checkPickerValueShow(item, defaultValue) {
      let temp;
      if (item.type == "channelType") {
        if (item.selectedValue) {
          temp = item.selectedValue.data.channelTypeName;
        } else {
          if (defaultValue) {
            temp = defaultValue;
          } else {
            temp = item.tip;
          }
        }
      } else if (item.type == "unitPrice" || item.type == "maxCharge") {
        if (item.selectedValue) {
          temp = item.selectedValue.lable;
        } else {
          if (defaultValue) {
            temp = defaultValue;
          } else {
            temp = item.tip;
          }
        }
      } else {
        if (item.selectedValue) {
          temp = item.selectedValue.lable + "%";
        } else {
          if (defaultValue) {
            temp = defaultValue + "%";
          } else {
            temp = item.tip;
          }
        }
      }
      return temp;
    },
    //下拉控件
    showPicker(picker, defaultValue) {
      let tempData = [];
      let msg = "";
      switch (picker.type) {
        case "channelType":
          msg = "暂无可选通道";
          break;
        case "maxCharge":
          msg = "暂无可选手续费最高值";
          break;
        case "feeValue":
        case "feeUpValue":
        case "feeDownValue":
          msg = "暂无可选费率";
          break;
        case "unitPrice":
          msg = "暂无可选笔单价";
          break;
        default:
          msg = "暂无可选值";
          break;
      }
      if (picker.type == "channelType") {
        for (let i = 0; i < picker.selectedData.length; i++) {
          tempData.push({
            value: picker.selectedData[i].channelTypeName,
            lable: picker.selectedData[i].channelType,
            data: picker.selectedData[i]
          });
        }
      } else {
        for (let i = 0; i < picker.selectedData.length; i++) {
          tempData.push({
            value: picker.selectedData[i],
            lable: picker.selectedData[i],
            data: picker.selectedData[i]
          });
        }
      }
      if (!picker.selectedValue) {
        if (defaultValue) {
          let temp;
          if (
            picker.type == "feeValue" ||
            picker.type == "feeUpValue" ||
            picker.type == "feeDownValue"
          ) {
            temp = this.repeatFeelData(defaultValue);
          }
          let index = picker.selectedData.indexOf(temp);
          if (index > -1) {
            picker.anchor = [index];
          } else {
            picker.anchor = [0];
          }
        }
      }

      picker.data = tempData;
      if (picker.data.length == 0) {
        Toast(msg);
      } else {
        this.pickerHide = true;
        this.$nextTick(() => {
          this.pickerHide = false;
          this.defaultPicker = picker;
          this.$nextTick(() => {
          this.$refs["defaultPicker"].show();
          });
        });
      }
    },
    //弹窗选择回掉赋值
    handleConfirm(picker, v, data) {
      picker.anchor = [v[0].index];
      picker.selectedValue = data[v[0].index];
      if (picker.type !== "channelType") {
        this.resetChannelType();
      }
    },
    back() {
      this.$emit("selectFeelBack");
    },
    // 字段校验
    fieldValidate(fieldName, value) {
      this.resetChannelType();
      let isValidate = true;
      //补贴后费率
      if (fieldName === "subsidyFee" || isSubmit === true) {
        const fieldValue = value[fieldName];
        if (CommonUtil.isEmpty(fieldValue)) {
          isValidate = false;
          Toast("请填写补贴后费率");
          return isValidate;
        } else if (!/^(\d+)(.\d{0,2})?$/.test(fieldValue)) {
          isValidate = false;
          Toast("补贴后费率最多输入两位小数");
          return isValidate;
        } else if (value[feeValue]) {
          if (fieldValue > value.feeValue) {
            isValidate = false;
            Toast("补贴后费率不能大于申请费率");
            return isValidate;
          }
        }
      }
      return isValidate;
    },
    checkData(feeModels) {
      if (feeModels.length == 0) {
        Toast("请先选择支付方式");
        return false;
      }
      for (let i = 0; i < feeModels.length; i++) {
        // if (!feeModels[i].useUnitPrice && !feeModels[i].feeValue && feeModels[i].hasOpen) {
        if (!feeModels[i].useUnitPrice && !feeModels[i].feeValue) {
          Toast("请先选择" + feeModels[i].payTypeName + "申请费率");
          return false;
        }
        if (feeModels[i].useEncourageStatus && !feeModels[i].subsidyFee) {
          Toast("请先填写" + feeModels[i].payTypeName + "补贴后费率");
          return false;
        }
        if (feeModels[i].useUnitPrice && !feeModels[i].unitPrice) {
          Toast("请先选择" + feeModels[i].payTypeName + "笔单价");
          return false;
        }
        if (
          feeModels[i].useUnitPrice &&
          feeModels[i].unitPrice &&
          !(
            feeModels[i].feeValue ||
            (feeModels[i].feeDownValue && feeModels[i].feeUpValue)
          )
        ) {
          Toast("请先选择" + feeModels[i].payTypeName + "申请费率");
          return false;
        }
        if (feeModels[i].hasMaxCharge && !feeModels[i].maxCharge) {
          if(feeModels[i].payType!=='03' || feeModels[i].useUnitPrice) {
            Toast("请先选择" + feeModels[i].payTypeName + "最高手续费");
            return false;
          }
          // Toast("请先选择" + feeModels[i].payTypeName + "最高手续费");
          // return false;
        }
      }
      return true;
    },
    submit() {
      let feeModels = this.getSelectData();
      let data = {
        isManualSelection:true,
        channelType: this.channelTypePicker.selectedValue
          ? this.channelTypePicker.selectedValue.data.channelType
          : this.channelType,
        channelTypeName: this.channelTypePicker.selectedValue
          ? this.channelTypePicker.selectedValue.data.channelTypeName
          : this.channelTypeName,
        openChannelType: this.channelTypePicker.selectedValue
          ? this.channelTypePicker.selectedValue.data.openChannelType
          : this.openChannelType,
        openChannelTypeName: this.channelTypePicker.selectedValue
          ? this.channelTypePicker.selectedValue.data.openChannelTypeName
          : this.openChannelTypeName,
        validBeginTime: this.channelTypePicker.selectedValue
          ? this.channelTypePicker.selectedValue.data.validBeginTime
          : this.validBeginTime,
        validEndTime: this.channelTypePicker.selectedValue
          ? this.channelTypePicker.selectedValue.data.validEndTime
          : this.validEndTime,
        feeModels: feeModels,
        remark: this.remark
      };
      if (!this.checkData(feeModels)) {
        return;
      }
      /* if (!data.channelType) {
        Toast("请先选择通道");
        return;
      } */
      this.$emit("selectFeelSubmit", JSON.stringify(data));
    }
  },
  components: {
    customHeader,
    inputClear
  }
};
</script>
<style lang='scss' scoped>
@import "openPayment";
</style>
<style lang='scss' >
@import "../../style/public";
.van-switch {
  
  @include remCalc(font-size, 43);
}
.form-blank-style{
  width: pw(355);
  margin-left: pw(10);
  margin-top: pw(10);
}

.textarea{
  width: pw(335);
  height: pw(100);
  background: rgba(248, 248, 248, 1);
  margin-top: pw(20);

}
.textarea::placeholder{
  font-family: PingFang SC;
  @include remCalc(font-size, 24);
font-weight: 400;
  color: rgba(153, 153, 153, 1);

padding-left: pw(10);
padding-top: pw(10);
}
.input-item{
  padding: 0!important;
}
.itemBox img{
  margin-right: pw(8);
}
</style>
